<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>生成地图缓存作业</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建生成地图缓存作业...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">
    var layer, processingJobsUrl = "http://117.122.248.69:8090/iserver/services/spatialprocessing/rest/v1/jobs",
        token = 'oZdJwpVhYnPNEAt8-ykB-Cy39gEZkdvPZ9knTbCdui1SoBeXWVCwx-j5tOVSScotsUX1qwZF44X9m6wNME1kBg..',
        map = L.map('map', {
            crs: L.CRS.TianDiTu_WGS84,
            center: [40.75, -73.95],
            maxZoom: 18,
            zoom: 12
        }),
        info = L.control({position: 'topright'});
    L.supermap.tiandituTileLayer("http://t{s}.tianditu.com/vec_c/wmts", {
        layer: "vec",
        tilematrixSet: "c"
    }).addTo(map);
    info.onAdd = function () {
        var popup = L.DomUtil.create('div');
        popup.style = 'width:22%';
        popup.innerHTML = "<div class='panel panel-default'>" +
            "<div class='panel-heading'>" +
            "<h3 class='panel-title'>地图缓存作业</h3>" +
            "</div>" +
            "<div class='panel-body'>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>输入数据　　　</span>" +
            "<div>" +
            "<select class='form-control' id='datasetName' name='clientType'>" +
            "<option selected='selected'>samples_newyork_taxi_2013-01_14k</option>" +
            "</select> </div> </div> <p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>缓存类型　　　</span>" +
            "<div>" +
            "<select class='form-control' id='imageType' name='clientType'>" +
            "<option value='Heatmap' selected='selected'>热度图</option>" +
            "</select> </div> </div> <p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>缓存范围　　　</span>" +
            "<input id='bounds' type='text' class='form-control' placeholder='-74.050, 40.650, -73.850, 40.850'/>" +
            "</div> <p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>缓存比例尺级别</span>" +
            "<input id='level' type='text' class='form-control' placeholder='5'/>" +
            "</div><p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>缓存名称　　　</span>" +
            "<input id='cacheName' type='text' class='form-control' placeholder='cache'/>" +
            "</div><p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>存储类型　　　</span>" +
            "<div>" +
            "<select class='form-control' id='cacheType' name='clientType'>" +
            "<option selected='selected'>MongoDB</option>" +
            "</select></div></div><p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>服务地址　　　</span>" +
            "<input id='serverAdresses' type='text' class='form-control' placeholder='117.122.248.69:27017'/>" +
            "</div><p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>数据库　　　　</span>" +
            "<input id='database' type='text' class='form-control' placeholder='smtiles'/>" +
            "</div><p>" +
            "<div class='input-group'>" +
            "<span class='input-group-addon'>版本　　　　　</span>" +
            "<input id='version' type='text' class='form-control' placeholder='v1'/>" +
            "</div><p>" +
            "<div align='right'>" +
            "<input type='button' id='btn' class='btn btn-primary' value='创建'/>" +
            "</div></div></div>";
        handleMapEvent(popup, this._map);
        return popup;
    };
    info.addTo(map);

    var bounds = [], serverAddress = [];
    ($('#bounds').val() || $('#bounds').attr('placeholder')).split(',').map(function (el) {
        return bounds.push(parseFloat(el));
    });
    serverAddress.push(($('#serverAdresses').val() || $('#serverAdresses').attr('placeholder')).toString());
    var processingJobsService = new L.supermap.processingJobsService(processingJobsUrl);
    SuperMap.SecurityManager.registerToken("http://117.122.248.69:8090", token);

    $('#btn').on('click', function () {
        $('#btn').prop('disabled', true);
        $("#model").modal({show: true, backdrop: 'static', keyboard: false});
        if (map && layer) {
            map.removeLayer(layer);
        }
        var buildCacheJobParameter = new SuperMap.BuildCacheJobParameter({
            datasetName: $('#datasetName').val() || $('#datasetName').attr('placeholder'),
            cacheName: $('#cacheName').val() || $('#cacheName').attr('placeholder'),
            cacheType: $('#cacheType option:selected').text(),
            serverAdresses: serverAddress,
            database: $('#database').val() || $('#database').attr('placeholder'),
            version: $('#version').val() || $('#version').attr('placeholder'),
            bounds: L.latLngBounds(L.latLng(bounds[1], bounds[0]), L.latLng(bounds[3], bounds[2])),
            imageType: $('#imageType option:selected').attr('value'),
            level: parseInt($('#level').val() || $('#level').attr('placeholder'))
        });
        processingJobsService.addBuildCacheJob(buildCacheJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                alert('创建失败!');
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.Request.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        layer = L.supermap.imageMapLayer(mapUrl, {noWrap: true, transparent: true});
                        layer.addTo(map);
                        $("#model").modal('hide');
                        $('#btn').prop('disabled', false);
                    });
                }
            });
        });
    });

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

</script>
</body>
</html>